一樣是不免俗的前言

這次是第二次參加，
去年還懵懂無知(?)的情況下就被隊友推坑來參加鐵人賽，
去年我們是五人團，
可惜今年只剩我一人參加了XD
(PS1. 我並沒有跟去年的隊友告知說我今年有參加的這件事XD"
但也許過幾天他們就會發現了也說不定XD)
(PS2. 今年其實大家都比較忙，
但我不會說我是因為剛追完奧運就看到鐵人賽的文宣被吸引報名的XD
(為了不佔版面，我把文宣圖移到本文章最下方XD)
這也是我不敢跟團員說我有偷偷報名的原因XD)

今年的 30 天系列文準備要寫什麼呢？

去年的最後一篇文章有提到我那時候正好在接觸 Next.js，
是以 React 為基底的套件，
後續剛好有機會參與前端的撰寫(?)工作，
但是前期我實在吃足了苦頭，
去年的文章有提到我是寫純 HTML/CSS (跟 Javascript) 起家(?)的，
所以不要說 React，在那之前 Bootstrap 我也沒怎麼碰過，
Reactstrap 是把 Bootstrap 的語法用 React 的語法包裝起來。
但當下對我來說這些都算是剛接觸的新東西、新知識，
所以當時我幾乎是 Bootstrap, React, Reactstrap 傻傻分不清楚orz

我記得我一開始連 Bootstrap 的 mb-4, p-2 這種語法都看不懂，
更不要說 Bootstrap 很重要的 Grid 概念，
Container, Row, Col 根本不知道是什麼要怎麼用XD

(PS. 在 Bootstrap 的世界 Grid 是用 class 的方式寫成這樣：

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
  </div>
</div>

可參考→ 網格系統 (Grid system)
我相信以上的寫法是跟我當初一樣只寫過純 HTML/CSS 比較看得懂的樣子XD)

Reactstrap 把以上的語法包裝成這樣：

<Container>
  <Row>
    <Col>.col</Col>
  </Row>
</Container>

可參考→ Layout Components (Container, Row, Col)

但是光是這樣為什麼我會吃足苦頭，
因為帶我進門的前輩在我以上觀念都還沒建立起來時，
就直接叫我學這個寫法：

<Row>
    <Col xs="6" md="4">.col-6 .col-md-4</Col>
    <Col xs="6" md="4">.col-6 .col-md-4</Col>
    <Col md="4">.col-md-4</Col>
</Row>

md 是什麼啦XD 這是什麼根本看不懂XD
這就跟叫剛學日語的人，而且是剛學會五十音的情況下，
就叫他學動詞變化是一樣的心情XD

所以我想要透過這 30 天的文章把我去年剛接觸 Next.js, React, Bootstrap, Reactstrap 這段歷程記錄下來，
然後最後再把學習這些東西的順序釐清出來，
除了是複習之外，
也希望讓之後跟我遇到一樣問題的人不會跟我一樣霧煞煞XD
(feat. 以寫鐵人賽之名，行表前輩之實 XDDDDDDDDDD)

後記

其實會挑今天開賽是有特別的原因哦，
因為今天是我前公司離職滿三週年的日子!!!!!!!!
(feat. 跟現在夥伴們認識滿兩週年的日子XD)
(feat. 知世就是力量的知世生日XD)

為了慶祝 9/3 這麼意義非凡的日子，
所以我決定今年挑 9/3 開賽XD
今年沒有參加團體組，
其實我超怕我中途棄賽XD
請參加鐵人賽的各位戰友們、夥伴們多多指教(及鞭策小的)XD

傳說中吸引我報名的文宣圖

去年完賽已經拿下第一面獎牌了，今年我要再拿下一面獎牌!!!!!!!!!!!!!!
Fighting!!!!!!!!!!!!!!!!!

(PS. 抱歉小戴的貼圖借我用一下XD 但怕有打廣告嫌疑這邊就不放上貼圖連結，
有興趣的大家可以自行搜尋XD)